<template>
<uni-shadow-root class="partials-banner-banner"><block v-if="setting&&setting.platformSetting">
    <block v-if="receiveData.androidTemplate == ''&&receiveData.jsonData">
        
        <block v-if="receiveData.jsonData.height < 3">
         
          <view class="SwiperContainer" :style="'width:'+(receiveData.jsonData.width?receiveData.jsonData.width+'rpx':'100%')+';height:'+(receiveData.jsonData.height<10?receiveData.jsonData.height * sysWidth+'px':receiveData.jsonData.height+'rpx')+';'">
            <swiper class="SwiperIndex" indicator-dots="true" :autoplay="autoplay||''" interval="5000" duration="1000" :indicator-color="setting.platformSetting.secondColor" :indicator-active-color="setting.platformSetting.defaultColor" @change="changeSwiperFun">
              <block v-for="(item,index) in (imgData)" :key="item.index">
                <swiper-item>
                  <image mode="aspectFit" v-if="(!item.type||item.type=='img')" :src="item.imageUrl||item.imagePath||item" :data-link="item.linkUrl||item.imagePath||item" @click="tolinkUrl"></image>
                  <component-tag-video :id="'videoComponent_'+(index)" v-if="item.type=='video'||item.type=='video_other'" :receiveData="item.jsonData" @sendDataFun="getDataFun"></component-tag-video>
                  
                </swiper-item>
              </block>
            </swiper>
          </view>
        </block>
        <block v-else>
            <view :class="'SwiperContainer '+(receiveData.jsonData.styleType=='product'?'blcok':'')" :style="'width:'+(receiveData.jsonData.width?receiveData.jsonData.width+'rpx':'100%')+';height:'+(receiveData.jsonData.height<10?receiveData.jsonData.height * sysWidth+'px':receiveData.jsonData.height+'rpx')+';'">
              <swiper class="SwiperIndex" indicator-dots="true" :autoplay="autoplay||''" interval="5000" duration="1000" :indicator-color="setting.platformSetting.secondColor" :indicator-active-color="setting.platformSetting.defaultColor" @change="changeSwiperFun">
                <block v-for="(item,index) in (imgData)" :key="item.index">
                  <swiper-item>
                    <image :class="receiveData.jsonData.styleType=='product'?'productImg':''" mode="aspectFit" v-if="(!item.type||item.type=='img')" :src="(item.imageUrl||item.imagePath||item)+'?x-oss-process=style/normal'" :data-link="item.linkUrl||item.imagePath||item" @click="tolinkUrl"></image>
                    <component-tag-video :id="'videoComponent_'+(index)" v-if="item.type=='video'||item.type=='video_other'" :receiveData="item.jsonData" @sendDataFun="getDataFun"></component-tag-video>
                    
                  </swiper-item>
                </block>
              </swiper>
            </view>
          
        </block>
    </block> 
    <block v-if="(receiveData.androidTemplate == 'more_banner'||receiveData.androidTemplate ==='form_more_banner')&&receiveData.jsonData">
        
        <block v-if="relateBean.length!=0">
          <scroll-view class="more_banner_block" scroll-x="true" :style="'padding:'+(androidTemplate=='form_more_banner'?'10rpx 0rpx':'10rpx 20rpx')+';height:'+(receiveData.jsonData.height<10?receiveData.jsonData.height * sysWidth+20+'px':receiveData.jsonData.height+20+'rpx')+';'">
            <image v-for="(item,index) in (receiveData.jsonData.images)" :key="item.index" @load="imageLoad" :data-index="index" :style="'width:'+(imgs[index].width)+'px;height:'+(imgs[index].height)+'px;'" class="more_banner_block_item_img" :src="item.imageUrl||item" :data-link="item.linkUrl||item" @click="tolinkUrl"></image>
          </scroll-view>
        </block>
    </block> 
    <block v-if="(!receiveData.androidTemplate&&receiveData.androidTemplate != '')&&receiveData.jsonData">
        
        <block v-if="receiveData.jsonData.height < 3">
         
          <view class="SwiperContainer" :style="'width:'+(receiveData.jsonData.width?receiveData.jsonData.width+'rpx':'100%')+';height:'+(receiveData.jsonData.height<10?receiveData.jsonData.height * sysWidth+'px':receiveData.jsonData.height+'rpx')+';'">
            <swiper class="SwiperIndex" indicator-dots="true" :autoplay="autoplay||''" interval="5000" duration="1000" :indicator-color="setting.platformSetting.secondColor" :indicator-active-color="setting.platformSetting.defaultColor" @change="changeSwiperFun">
              <block v-for="(item,index) in (imgData)" :key="item.index">
                <swiper-item>
                  <image mode="aspectFit" v-if="(!item.type||item.type=='img')" :src="item.imageUrl||item.imagePath||item" :data-link="item.linkUrl||item.imagePath||item" @click="tolinkUrl"></image>
                  <component-tag-video :id="'videoComponent_'+(index)" v-if="item.type=='video'||item.type=='video_other'" :receiveData="item.receiveData.jsonData" @sendDataFun="getDataFun"></component-tag-video>
                  
                </swiper-item>
              </block>
            </swiper>
          </view>
        </block>
        <block v-else>
            <view :class="'SwiperContainer '+(receiveData.jsonData.styleType=='product'?'blcok':'')" :style="'width:'+(receiveData.jsonData.width?receiveData.jsonData.width+'rpx':'100%')+';height:'+(receiveData.jsonData.height<10?receiveData.jsonData.height * sysWidth+'px':receiveData.jsonData.height+'rpx')+';'">
              <swiper class="SwiperIndex" indicator-dots="true" :autoplay="autoplay||''" interval="5000" duration="1000" :indicator-color="setting.platformSetting.secondColor" :indicator-active-color="setting.platformSetting.defaultColor" @change="changeSwiperFun">
                <block v-for="(item,index) in (imgData)" :key="item.index">
                  <swiper-item>
                    <image :class="receiveData.jsonData.styleType=='product'?'productImg':''" mode="aspectFit" v-if="(!item.type||item.type=='img')" :src="(item.imageUrl||item.imagePath||item)+'?x-oss-process=style/normal'" :data-link="item.linkUrl||item.imagePath||item" @click="tolinkUrl"></image>
                    <component-tag-video :id="'videoComponent_'+(index)" v-if="item.type=='video'||item.type=='video_other'" :receiveData="item.jsonData" @sendDataFun="getDataFun"></component-tag-video>
                    
                  </swiper-item>
                </block>
              </swiper>
            </view>
          
        </block>
    </block>
</block></uni-shadow-root>
</template>
<wxs src="../../public/publicFun.wxs" module="publicFun"></wxs>
<script>
import ComponentTagVideo from '../video/video.vue'
global['__wxVueOptions'] = {components:{'component-tag-video': ComponentTagVideo}}

global['__wxRoute'] = 'partials/banner/banner'
const app = getApp();
Component({
  properties: {
    receiveData: {
      type: JSON,
      value: 'default value',
    }
  },
  data: {
    someData: {},
    sysWidth:"",
    setting:{},
    imgs:null,
    imgData:'',
    autoplay:'',
  },
  ready:function(){
    let that=this;
    that.setData({
      sysWidth: app.globalData.sysWidth,
      setting:app.globalData.setting,
      autoplay:that.data.receiveData.jsonData.autoplay||''
    });
    console.log("====banner====",that.data.receiveData)
    let imgData = that.data.receiveData.jsonData.images;
    let height=that.data.receiveData.jsonData.height<10?that.data.receiveData.jsonData.height * that.data.sysWidth+"px":that.data.receiveData.jsonData.height+"rpx"
    for(let i=0;i<imgData.length;i++){
        let url=imgData[i].linkUrl||imgData[i].imagePath||'';
        console.log('==url===',url)
        if(url&&url.indexOf("v.qq.com")!=-1){
            imgData[i].type='video'
            imgData[i].jsonData={jsonData:{
                source:url,
                autoPlay:0,
                type:'video',
                id:'videoComponent_'+i,
                height:height,
                width:that.data.receiveData.jsonData.width,
                poster:imgData[i].imageUrl||''
            }}
        }else if(url&&url.indexOf(".mp4")!=-1||url.indexOf(".avi")!=-1||url.indexOf(".wmv")!=-1){
            imgData[i].type='video_other';
            imgData[i].jsonData={jsonData:{
                source:url,
                autoPlay:0,
                type:'video_other',
                id:'videoComponent_'+i,
                height:height,
                width:that.data.receiveData.jsonData.width,
                poster:imgData[i].imageUrl||''
            }}
        }else{
            if(url){
                imgData[i].type='img'
            }
        }
    }
    that.setData({ imgData: imgData })
    console.log("=====banner--data=====", that.data.receiveData,that.data.imgData)
  },
  methods: {
    getDataFun:function(e){
        let that=this;
        console.log("====getDataFun====",e)
        let state=e.detail.state;
        if(state=="play"){
            that.setData({ autoplay: '' })
        }else{
            that.setData({ autoplay: true })
        }
    },
    changeSwiperFun:function(e){
        // console.log("===changeSwiperFun===",e);
        let index=e.detail.current;
        let that=this;
        that.triggerEvent('bannerCurIndexFun',{index:index})
        let imgData=that.data.imgData
        let idData='#videoComponent_'+index
        if(imgData[index].autoPlay&&imgData[index].type.indexOf('video')!=-1){
            that.selectComponent(idData).onStartPlay(index)
        }
        for(let i=0;i<imgData.length;i++){
            if(imgData[i].type&&imgData[i].type.indexOf('video')!=-1&&index!=i){
                idData='#videoComponent_'+i
                that.selectComponent(idData).onStopPlay(i)
            }
        }
    },
    imageLoad: function (e) {
      let that=this;
      console.log("=====imageLoad====",e,that.data.receiveData.jsonData.height,that.data.sysWidth)
      let index = e.currentTarget.dataset.index;
      let width = e.detail.width;
      let height = e.detail.height;
      let imgData = that.data.receiveData.jsonData.images;
      let fixedHeght = Number(that.data.receiveData.jsonData.height) * that.data.sysWidth;
      imgData[index].height = fixedHeght;
      imgData[index].width = (width / height ) * fixedHeght;
      that.setData({ imgs: imgData })
      console.log("=====imageLoad====", that.data.imgs)
    },
    tolinkUrl: function (event) {
      console.log(event.currentTarget.dataset.link)
      app.globalData.linkEvent(event.currentTarget.dataset.link);
    }
  },
})
export default global['__wxComponents']['partials/banner/banner']
</script>
<style platform="mp-weixin">
@import 'more_banner/index.css';/* 引入可以滑动的样式 */
.SwiperContainer{
  height: 9em;
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
.SwiperIndex{
  width: 100%;
  height: 100%;
}
.SwiperIndex image{
  height:100%;
  width: 100%;
}
.productImg{
    border-radius: 20rpx;
}
.blcok{
  box-shadow: 0px 0px 18px rgba(0, 0,0, 0.16);
  border-radius: 20rpx;
  margin: 20rpx 0;
}
</style>